<template>
  <el-dialog
    v-model="dialogVisible"
    :title="title"
    width="500px"
    :append-to-body="true"
    :before-close="handleClose">
    <el-form ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-width="120px"
      class="demo-ruleForm"
      status-icon>
      <el-form-item
        label="收货人全称"
        prop="consignee"
       >
        <el-input
          placeholder="请输入"
          v-model="ruleForm.consignee" />
      </el-form-item>
      <el-form-item label="收货人ID"
        prop="consigneeId">
        <el-input
          placeholder="请输入"
          v-model="ruleForm.consigneeId" />
      </el-form-item>
       <el-form-item label="发运订单"
        prop="shippingOrder">
        <el-input
          placeholder="请输入"
          v-model="ruleForm.shippingOrder" />
      </el-form-item>
      <el-form-item label="预计发货日期"
        prop="deliveryTime">
        <el-date-picker
            v-model="ruleForm.deliveryTime"
            type="date"
            :format="'YYYY-MM-DD'"
            :value-format="'YYYY-MM-DD'"
            placeholder="请选择日期"
            style="width: 100%;"
          />
      </el-form-item>
    </el-form>
    <template #footer>
      <span
        class="dialog-footer">
        <el-button
          @click="handleCloses(ruleFormRef)">取消</el-button>
        <el-button
          type="primary"
          @click="submit(ruleFormRef)">
          确 认
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import {ref } from 'vue'
import { ElMessage, FormInstance } from 'element-plus'
import { REQUEST } from '@/api/request'
const ruleFormRef = ref<FormInstance>()
const title = ref('')
const dialogVisible = ref(false)
const emits = defineEmits(['ok'])
const ruleForm = ref({
  consigneeId: '',
  consignee: '',
  shippingOrder: '',
  deliveryTime: '',
})

const rules = ref({
  consignee: [{ required: true, message: '请输入', trigger: 'change' }],
  consigneeId: [{ required: true, message: '请输入', trigger: 'change' }],
  shippingOrder: [{ required: true, message: '请输入', trigger: 'change'}],
  deliveryTime: [{ required: true, message: '请选择', trigger: 'change' }],
})
const openModal = (t: any) => {
      ruleForm.value = {
        consigneeId:'',
        consignee: '',
        shippingOrder: '',
        deliveryTime: '',
      }
      dialogVisible.value = true
      title.value = t.title
      ruleForm.value = t.row
    }
    const handleClose = () => {
      dialogVisible.value = false
      emits('ok')
    }
    const handleCloses = (formEl: FormInstance | undefined) => {
      if (!formEl) return
      formEl.resetFields()
      emits('ok')
      dialogVisible.value = false
    }
    const submit = async (formEl: FormInstance | undefined) => {
      if (!formEl) return
      await formEl.validate((valid, fields) => {
        if (valid) {
          REQUEST.POST('ORDEREDIT',{batchList: [ruleForm.value]}).then((res: any) => {
            if (res.status == 200) {
              ElMessage({
                type: 'success',
                message: '编辑成功',
              })
              emits('ok')
            }
            dialogVisible.value = false
          })
        }
      })
    }
    defineExpose({ openModal })
</script>

<style lang="" scoped></style>
